<!--  -->
<template>
  <div>
    <el-container>
      <el-header height="">
        <!-- Header content -->
        <layout-header></layout-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <layout-sider
            @changeComp="changeComp($event)"
            :menus="menus"
          ></layout-sider>
          <!-- Aside content -->
        </el-aside>
        <el-container>
          <el-main height="650px">
            <layout-body :comp="comp"></layout-body>
            <!-- Main content -->
          </el-main>
          <el-footer height="">
            网页底部
            <!-- Footer content -->
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import LayoutBody from "../components/layout/layout-body.vue";
import LayoutHeader from "../components/layout/layout-header.vue";
import LayoutSider from "../components/layout/layout-sider.vue";
export default {
  //需要引入的组件
  components: { LayoutHeader, LayoutSider, LayoutBody },
  props: {},
  //存放数据
  data() {
    return {
      menus: [
        {
          title: "测试",
          key: "1000",
          menus: [
            {
              title: "文章管理",
              key: "1010",
              comp: "components/articlemanage.vue",
              menus: [],
            },
            {
              title: "用户管理",
              key: "1020",
              comp: "components/usermanage.vue",
              menus: [],
            },
          ],
        },
        {
          title: "测试",
          key: "2000",
          menus: [],
        },
      ],
      path: "",
    };
  },
  //计算属性
  computed: {
    comp() {
      if (this.path != "") {
        const path = this.path;
        //debugger;
        return () => import(`../${path}`);
      }
      return undefined;
    },
  },
  methods: {
    changeComp(event) {
      this.path = event;
      console.log(this.path);
    },
  },
};
</script>
